<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Document</title>
  <style>
    :root {
      --gridgap: 10px;
      --bradius: 10px;
      --titleheight: 3.8rem;
      font-size: 16px;
      --gridheight: 300px;

    }

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;

    }

    .cardbodyer {
      width: 100%;
      background: #eee;
      display: grid;
      grid-template-rows: var(--gridheight);
      grid-template-columns: repeat(auto-fit, 90%);
      grid-row-gap: calc(var(--gridgap) * 2);
      justify-content: center;
      padding: 10px 0;
      -webkit-overflow-scrolling: touch;
    }

    .card {
      background: #fff;
      border-radius: var(--bradius);
      height: var(--gridheight);
      position: relative;
    }

    .card>input[type="checkbox"] {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .card:focus-within {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
    }

    .card:focus-within>input {
      z-index: -1;
    }

    /* .card:focus-within figcaption input[type="checkbox"]{
        } */
    .card:focus-within figure {
      position: relative;
      overflow: hidden;
    }

    .card:focus-within figure img {
      height: 100% !important;
      opacity: .9;
    }

    .card:focus-within figcaption>span {
      display: none;
    }

    .card:focus-within figcaption {
      position: absolute;
      display: block;
      top: 10vh;
      bottom: 10vh;
      width: 100%;
      height: 80vh;
      overflow: hidden scroll;
      left: 0;
      padding: 1rem;
      font-size: 1rem;
      line-height: 1.75rem;
      background: rgba(0, 0, 0, .5);
      color: #fff;
    }

    .card:focus-within figcaption div.text {
      z-index: 3;
      display: block;
      text-indent: 2rem;
    }

    .card:focus-within figcaption div.text>p {
      margin-bottom: 1rem;
    }

    .card:focus-within figcaption div.text>p:last-of-type {
      margin-bottom: 0;
    }

    figure {
      height: 100%;
    }

    figure img {
      display: block;
      width: 100% !important;
      object-fit: cover;
      height: calc(100% - var(--titleheight)) !important;
      object-position: center;
      border-radius: var(--bradius);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    figure figcaption {
      height: var(--titleheight);
      line-height: var(--titleheight);
      padding: 0 1em;
      font-size: 1.5rem;
      position: relative;
    }

    figure figcaption div.text {
      display: none;
    }

    figcaption input[type="checkbox"] {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    figcaption input[type="checkbox"]:checked+span {
      filter: blur(.5px);
    }

    /* 平板 */
    @media(min-width: 768px) and (max-width: 1199px) {
      .cardbodyer {
        grid-template-columns: repeat(auto-fit, calc((100% - var(--gridgap)) / 2));
        grid-column-gap: var(--gridgap);
        padding: 10%;
      }
    }

    /* pc */
    @media(min-width: 1200px) {
      .cardbodyer {
        grid-template-columns: repeat(auto-fill, minmax(calc((100% - (var(--gridgap) * 3)) / 4), 1fr));
        grid-column-gap: var(--gridgap);
        padding: 10%;
      }
    }
  </style>
</head>

<body>
  <div class="cardbodyer">
    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=1" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=2" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=3" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=4" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=5" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=6" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>


    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=7" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=8" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=9" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=10" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>

    <div class="card">
      <figure>
        <img src="https://picsum.photos/360/460?random=11" alt="">
        <figcaption>
          <input type="checkbox">
          <span>这是标题</span>
          <div class="text">
            <p>
              青柠檬的酸我站在桥上，四周风景很美。
            </p>
            <p>
              天空透蓝，盘旋着一只山鹰。它在那儿，比起觅食，更像是在耀武扬威。在偎着山的地方，碎云被高处的风拉扯着，直变得鼓囊，有明有暗。也再不断地滑动着，也不知是会到达什么地方。
            </p>
            <p>
              脚下是清澈的湍流，是山上化了的雪水汇就的，格外清澈。本是细细的一股，淌过去便是，但如今是夏季，不得不走高处的吊桥。底下，水旁有孩子在安静地玩耍，捧着水，手上晶亮得像是有一把碎钻。水底有鹅卵石，山野一般的朴素颜色，失了棱角多了润泽，一个垒一个，圆滚滚倒是很可爱。
            </p>
            <p>
              我身后是森林，我刚从那里出来。这儿的森林奇妙可爱，虽古树参天，但毫无阴森之意。树叶虽密，仍能在彼此堆叠中留出阳光窥视的小孔。于是干净的土地上便多了一个个圆圆的小光斑，铜钱似的。这泥土夯实，偶尔一阵山风也不会撩起呛人的尘土。大抵是这的树根扎得深，彼此又格外关爱的缘故吧。在低处，有些精灵似的小植物。譬如那藏在阴暗处的朽木上，生了半透明的小耳朵，如是活物。再譬如说紧挨着树根的，也会冒出一两只蘑菇。色彩艳丽得很善良。
            </p>
            <p>
              而我要去的对岸更加美丽。那儿不再有密布的树了，都是些低矮的灌木丛。在那儿扑闪着，上上下下。阳光也更明亮一点，到处都落满了，一切都好像悬浮在空中。沿着那条铺了小石子儿的甬道一直往前走——虽说此刻还看不见——但那儿是有着一幢可爱的小房子的。红色的屋顶，圆圆的小窗，窗台上摆了一盆随风摆头的小紫花。
            </p>
            <p>
              一阵大风吹来，眼见着西边蠕动起了阴暗的云。或许不多久就要下雨了。前面的桥，身后的桥都像是被抖动的绳索一样跳的厉害，可是我脚下的那一片儿却没有动。我侥幸地继续往前走，可是我的视野里没有出现任何颠簸。前面的桥是在抖的，后面的桥是在抖得，可我脚下的那一条木板，貌不惊人的，粗糙的纹理，一颗黝黑虫眼，偏偏稳如磐石。
            </p>
            <p>
              我是多么幸运!可是我忽然想起来奇怪的事情来，又向脚下看去，向天上看去，向后看去，向前看去，向四周八方看去。四处都是美景，唯独没有我的身体。我百思不得其解，索性落到河里去，又在河底继续欣赏着美景。
            </p>
          </div>
        </figcaption>
      </figure>
      <input type="checkbox">
    </div>
  </div>
</body>

</html>